<template>
  <div class="label-info">
    <el-scrollbar style="height: 100%">
      <div class="info-header">
        <span>标注</span>
        <i class="el-icon-circle-close close-btn" @click="close"></i>
      </div>

      <div class="info-body">
        <div class="label-type">
          <div
            class="type-item"
            v-for="(item, index) in typeList"
            :key="index"
            :class="{ 'is-select': item.isCheck }"
            @click="selectLabelType(item)"
          >
            <img
              :src="require(`@/assets/image/labelInfo/${item.type}.png`)"
              alt=""
            />
          </div>
        </div>

        <div v-if="selectItem.type != '清空'">
          <div class="label-name body-item">
            <span>名称</span>
            <el-input
              v-model="publicForm.name"
              placeholder="请输入名称"
            ></el-input>
          </div>

          <el-button type="primary" @click="uploadFile">上传</el-button>

          <div class="label-describe body-item">
            <span>描述</span>
            <el-input
              type="textarea"
              :rows="3"
              placeholder="暂无描述"
              v-model="publicForm.describe"
              resize="none"
              maxlength="200"
            ></el-input>
            <span class="describe-num-words">0/200</span>
          </div>

          <!-- 点控件 -->
          <div class="point-control" v-if="selectItem.type == '点'">
            <div class="point-icon body-item">
              <span>图标</span>
              <div class="icon-list">
                <div
                  class="list-item"
                  v-for="(item, index) in pointIconList"
                  :key="index"
                  :class="{ 'is-select': item.isCheck }"
                  @click="clickIconList(item)"
                >
                  <img
                    :src="
                      require(`@/assets/image/labelInfo/pointIcon/${item.icon}.png`)
                    "
                    alt=""
                  />
                </div>
              </div>
            </div>

            <div class="point-icon-size body-item">
              <span>图标大小</span>
              <div class="radio-box">
                <el-radio v-model="pointForm.iconSize" label="20">小</el-radio>
                <el-radio v-model="pointForm.iconSize" label="30">中</el-radio>
                <el-radio v-model="pointForm.iconSize" label="40">大</el-radio>
              </div>
            </div>

            <div class="text-style body-item">
              <span>文字样式</span>
              <div class="style-list">
                <div
                  class="list-item"
                  v-for="(item, index) in textStyleList"
                  :key="index"
                  :class="{ 'is-select': item.isCheck }"
                  @click="selectLabelTextStyle(item)"
                >
                  <span
                    :style="`background-color: ${item.backgroundColor}; color: ${item.fillColor}`"
                    >大楼</span
                  >
                </div>
              </div>
            </div>

            <div class="point-text-position body-item">
              <span>文字位置</span>
              <div class="radio-box">
                <el-radio v-model="pointForm.textPosition" label="CENTER"
                  >居中
                </el-radio>
                <el-radio v-model="pointForm.textPosition" label="LEFT"
                  >左侧
                </el-radio>
                <el-radio v-model="pointForm.textPosition" label="RIGHT"
                  >右侧
                </el-radio>
              </div>
            </div>
          </div>

          <!-- 线控件 -->
          <div class="line-control" v-if="selectItem.type == '线'">
            <div class="color-box body-item">
              <span>颜色</span>
              <div class="color-list">
                <div
                  class="list-item"
                  v-for="(item, index) in colorList"
                  :key="index"
                  :class="{ 'is-select': item.isCheck }"
                  @click="selectLabelColor(item)"
                >
                  <div
                    class="color"
                    :style="`background-color: ${item.value};`"
                  ></div>
                </div>
              </div>
            </div>

            <div class="line-type body-item">
              <span>线段类型</span>
              <div class="radio-box">
                <el-radio v-model="lineForm.lineType" label="solid"
                  >实线
                </el-radio>
                <el-radio v-model="lineForm.lineType" label="dashed"
                  >虚线
                </el-radio>
              </div>
            </div>

            <div class="line-width body-item">
              <span>线段粗细</span>
              <div class="radio-box line-radio">
                <el-radio v-model="lineForm.width" label="1">1px</el-radio>
                <el-radio v-model="lineForm.width" label="2">2px</el-radio>
                <el-radio v-model="lineForm.width" label="3">3px</el-radio>
                <el-radio v-model="lineForm.width" label="4">4px</el-radio>
                <el-radio v-model="lineForm.width" label="5">5px</el-radio>
                <el-radio v-model="lineForm.width" label="6">6px</el-radio>
              </div>
            </div>

            <div class="text-style body-item">
              <span>文字样式</span>
              <div class="style-list">
                <div
                  class="list-item"
                  v-for="(item, index) in textStyleList"
                  :key="index"
                  :class="{ 'is-select': item.isCheck }"
                  @click="selectLabelTextStyle(item)"
                >
                  <span
                    :style="`background-color: ${item.backgroundColor}; color: ${item.fillColor}`"
                    >大楼</span
                  >
                </div>
              </div>
            </div>
          </div>

          <!-- 面控件 -->
          <div class="surface-control" v-if="selectItem.type == '面'">
            <div class="color-box body-item">
              <span>颜色</span>
              <div class="color-list">
                <div
                  class="list-item"
                  v-for="(item, index) in colorList"
                  :key="index"
                  :class="{ 'is-select': item.isCheck }"
                  @click="selectLabelColor(item)"
                >
                  <div
                    class="color"
                    :style="`background-color: ${item.value};`"
                  ></div>
                </div>
              </div>
            </div>

            <div class="surface-opacity body-item">
              <span>不透明度</span>
              <div class="opacity-box">
                <el-slider
                  v-model="surfaceFrom.alpha"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                  v-model="surfaceFrom.alpha"
                  controls-position="right"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-input-number>
              </div>
            </div>

            <div class="text-style body-item">
              <span>文字样式</span>
              <div class="style-list">
                <div
                  class="list-item"
                  v-for="(item, index) in textStyleList"
                  :key="index"
                  :class="{ 'is-select': item.isCheck }"
                  @click="selectLabelTextStyle(item)"
                >
                  <span
                    :style="`background-color: ${item.backgroundColor}; color: ${item.fillColor}`"
                    >大楼</span
                  >
                </div>
              </div>
            </div>
          </div>

          <div class="body-submit">
            <el-button type="primary" @click="addLabel">添加</el-button>
          </div>
        </div>
      </div>
    </el-scrollbar>
    <check-document v-if="documentShow" :data="pickedEntity"></check-document>
  </div>
</template>

<script>
import Mark from "@/components/layoutSubassemb/js/mark.js";
import checkDocument from "./component/checkDocument.vue";

const { ipcRenderer } = window.require("electron");
const path = window.require("path");
export default {
  components: {
    checkDocument,
  },
  data() {
    return {
      documentShow: false,
      typeList: [
        {
          type: "清空",
          isCheck: false,
        },
        {
          type: "点",
          isCheck: true,
        },
        {
          type: "线",
          isCheck: false,
        },
        {
          type: "面",
          isCheck: false,
        },
      ],
      selectItem: {
        type: "点",
        isCheck: false,
      },
      colorList: [
        {
          value: "#99acba",
          isCheck: true,
        },
        {
          value: "#50dfff",
          isCheck: false,
        },
        {
          value: "#58a55c",
          isCheck: false,
        },
        {
          value: "#ff833e",
          isCheck: false,
        },
        {
          value: "#ff5fef",
          isCheck: false,
        },
        {
          value: "#4c87f4",
          isCheck: false,
        },
      ],
      textStyleList: [
        {
          backgroundColor: "#373737",
          fillColor: "#fff",
          isCheck: true,
        },
        {
          backgroundColor: "#dadada",
          fillColor: "#333333",
          isCheck: false,
        },
      ],
      publicForm: {
        name: "",
        describe: "",
        color: "",
        textStyle: {},
      },
      saveFrom: {},
      // 点
      pointIconList: [],
      pointForm: {
        iconName: "",
        iconSize: "20",
        textPosition: "CENTER",
      },
      // 线
      lineForm: {
        lineType: "solid",
        width: "3",
        isLabel: true,
      },
      // 面
      surfaceFrom: {
        alpha: 0.5,
      },
      fileName: "",
      pickedEntity: null,
    };
  },

  methods: {
    /**
     * 上传标注所链接的文档
     * */
    uploadFile() {
      const option = {
        filters: [{ name: "file", extensions: ["docx"] }],
      };
      ipcRenderer.send("show-open-dialog", option);
      ipcRenderer.on("show-open-dialog", (event, data) => {
        let params = {
          filePath: data.filePath,
          fileName: path.basename(data.filePath),
        };
        ipcRenderer.send("upload-file", params);
        ipcRenderer.on("file-saved", (event, data) => {
          this.fileName = path.basename(data);
        });
      });
    },
    /**
     * 公共控件
     * */
    // 选择标注类型
    selectLabelType(option) {
      if (this.selectItem.type == option.type) return;

      this.typeList.forEach((item) => {
        item.isCheck = item.type == option.type ? true : false;
      });
      this.selectItem = option;

      if (option.type == "清空") {
        return;
      }
    },

    // 选择颜色
    selectLabelColor(option) {
      this.colorList.forEach((item) => {
        item.isCheck = item.value == option.value ? true : false;
      });
      this.publicForm.color = option.value;
    },

    // 选择文字样式
    selectLabelTextStyle(option) {
      this.textStyleList.forEach((item) => {
        item.isCheck =
          item.backgroundColor == option.backgroundColor ? true : false;
      });
      this.publicForm.textStyle = option;
    },

    // 添加标注
    addLabel() {
      const parentNode = this.$parent.getCurNodeData("1-5");
      const controlItem = parentNode.control.find((e) => {
        return e.name == "显示";
      });

      const resourceId = this.$guid();
      const { type } = this.selectItem;
      let name = "";
      const { describe, color, textStyle } = this.publicForm;
      const show = controlItem.icon == "隐藏_s.png" ? false : true;
      let oldName = this.publicForm.name.replace(/\s*/g, "");

      name = oldName;
      parentNode.children.forEach((item) => {
        if (item.label == oldName) {
          const labelList = parentNode.children.map((e) => {
            return e.label;
          });
          name = this.$parent.unitListName(labelList, oldName);
        }
      });
      if (!name) {
        name = `我的标注_${parentNode.children.length + 1}`;
      }

      let params = {
        fileName: this.fileName,
        resourceId,
        type,
        name,
        describe,
        textStyle,
        show,
        isExist: true,
        callback: (positions) => {
          this.$emit("appendMarkNode", { positions, ...params });
        },
      };
      switch (type) {
        case "点":
          Object.assign(params, this.pointForm);
          break;

        case "线":
          params.color = color;
          Object.assign(params, this.lineForm);
          break;

        case "面":
          params.color = color;
          Object.assign(params, this.surfaceFrom);
          break;

        default:
          break;
      }
      this._Mark.loadMark(params);
    },

    /**
     * 点
     * */
    createdIconList() {
      const colorList = [
        "90a4b3",
        "43bdf7",
        "4f954b",
        "e88b37",
        "f1507e",
        "4b67fc",
      ];
      const iconNameList = ["标点", "标记", "图钉", "警告"];
      let pointIconList = [];
      iconNameList.forEach((item) => {
        colorList.forEach((option) => {
          pointIconList.push({
            icon: `${item}_${option}`,
            isCheck: false,
          });
        });
      });
      const expansionIconList = [
        "道路_90a4b3",
        "房屋_43bdf7",
        "树_4f954b",
        "车_e88b37",
        "购物_f1507e",
        "水域_4b67fc",
      ];
      expansionIconList.forEach((item) => {
        pointIconList.push({
          icon: item,
          isCheck: false,
        });
      });
      pointIconList[0].isCheck = true;
      this.pointIconList = pointIconList;
      this.pointForm.iconName = pointIconList.find((e) => e.isCheck).icon;
    },

    // 点击图标
    clickIconList(option) {
      this.pointIconList.forEach((item) => {
        item.isCheck = item.icon == option.icon ? true : false;
      });
      this.pointForm.iconName = option.icon;
    },

    close() {
      this.$emit("close");
    },

    // 添加entity点击事件
    entityClick() {},
  },

  created() {
    this.viewer = this.Global.viewer;
    this._Mark = new Mark({ Vm: this, viewer: this.viewer });
    this.publicForm.color = this.colorList.find((e) => e.isCheck).value;
    this.publicForm.textStyle = this.textStyleList.find((e) => e.isCheck);
    this.createdIconList();
  },
  mounted() {
    var handler = new Cesium.ScreenSpaceEventHandler(
      this.Global.viewer.scene.canvas
    );
    handler.setInputAction(
      function (movement) {
        var pick = this.Global.viewer.scene.pick(movement.position);
        this.pickedEntity = pick.id.attribute;
        this.documentShow = true;
      }.bind(this),
      Cesium.ScreenSpaceEventType.LEFT_CLICK
    );
  },
  beforeDestroy() {
    this._Mark.destroy();
    this.close();
  },
};
</script>

<style lang="less" scoped>
.label-info {
  position: fixed;
  left: 310px;
  top: 94px;
  width: 265px;
  height: calc(100% - 130px);
  padding: 15px 0;
  box-sizing: border-box;
  border-radius: 3px;
  background-color: #444444;
  z-index: 999;

  .info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 15px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #565656;
    font-size: 14px;
    color: #b4b4b4;

    .close-btn {
      cursor: pointer;
    }
  }

  .info-body {
    .label-type {
      display: flex;
      align-items: center;
      padding: 15px 10px;
      box-sizing: border-box;
      border-bottom: 1px solid #565656;
      column-gap: 10px;

      .type-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25px;
        height: 25px;
        border-radius: 3px;
        background-color: #565656;
        cursor: pointer;

        img {
          width: 15px;
          height: 15px;
        }
      }

      .is-select {
        background-color: #78a9ff;
      }
    }

    .body-item {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 15px 10px 0 10px;
      box-sizing: border-box;
      font-size: 14px;
      color: #b4b4b4;

      & > span {
        margin-bottom: 10px;
      }

      .describe-num-words {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin-bottom: 0;
        margin-top: 10px;
      }
    }

    .label-name {
      /deep/ .el-input__inner {
        background: rgba(0, 0, 0, 0);
        border: none;
        border-bottom: 1px solid #565656;
        border-radius: 0;
        padding: 0;
        font-size: 14px;
        color: #fff;
      }
    }

    .label-describe {
      /deep/ .el-textarea__inner {
        background: #3d3d3d;
        border: 1px solid #565656;
        font-size: 14px;
        color: #b4b4b4;
      }
    }

    .point-control,
    .surface-control,
    .line-control {
      padding-bottom: 15px;
      box-sizing: border-box;
      border-bottom: 1px solid #565656;
    }

    .color-box {
      .color-list {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .list-item {
          width: 30px;
          height: 30px;
          padding: 2px;
          box-sizing: border-box;
          border-radius: 3px;
          cursor: pointer;

          .color {
            width: 100%;
            height: 100%;
            border-radius: 3px;
          }
        }

        .is-select {
          border: 1px solid #78a9ff;
        }
      }
    }

    .radio-box {
      padding: 5px 0;
      box-sizing: border-box;

      /deep/ .el-radio {
        .el-radio__label {
          font-size: 13px;
          color: #b4b4b4;
        }
      }
    }

    .text-style {
      .style-list {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        column-gap: 15px;

        .list-item {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 50px;
          height: 30px;
          box-sizing: border-box;
          border-radius: 3px;
          font-size: 12px;
          color: #333333;
          cursor: pointer;

          span {
            display: inline-block;
            width: 30px;
            height: 20px;
            border-radius: 2px;
            text-align: center;
            line-height: 20px;
          }
        }

        .is-select {
          border: 1px solid #78a9ff;
        }
      }
    }

    .point-control {
      .point-icon {
        .icon-list {
          display: flex;
          flex-wrap: wrap;
          height: 130px;
          overflow-y: auto;
          column-gap: 15px;

          .list-item {
            width: 25px;
            height: 25px;
            padding: 3px;
            box-sizing: border-box;
            border-radius: 3px;
            margin-bottom: 10px;
            cursor: pointer;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .is-select {
            background-color: #616161;
          }
        }
      }

      .point-text-position {
        .position-icon {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }

    .line-control {
      .line-radio {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        /deep/ .el-radio {
          &:nth-child(n + 4) {
            margin: 10px 30px 0 0;
          }
        }
      }
    }

    .surface-control {
      .surface-opacity {
        .opacity-box {
          padding-left: 5px;
          box-sizing: border-box;
          display: flex;
          align-items: center;

          /deep/ .el-slider {
            width: 195px;
            margin-right: 15px;

            .el-tooltip {
              border: 2px solid #247de0;
            }

            .el-slider__bar {
              background-color: #247de0;
            }
          }

          /deep/ .el-input-number {
            width: 100px;
            height: 32px;

            .el-input-number__decrease,
            .el-input-number__increase,
            .el-input__inner {
              background-color: rgba(0, 0, 0, 0);
            }

            .el-input-number__decrease,
            .el-input-number__increase {
              border-bottom: 1px solid #565656;
              border-left: 1px solid #565656;

              &:hover {
                color: #6fa7e8;
              }
            }

            .el-input__inner {
              padding-left: 5px;
              border: 1px solid #565656;
              font-size: 14px;
              color: #fff;

              &:hover {
                border: 1px solid #565656;
              }
            }
          }
        }
      }
    }

    .body-submit {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 15px 10px 0 10px;
      box-sizing: border-box;

      /deep/ .el-button {
        padding: 6px 12px;
        border: none;

        &:nth-child(1) {
          background-color: #565656;
        }

        &:nth-child(2) {
          background-color: #373737;
        }
      }
    }
  }
}
</style>
<style lang="less">
.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
